<template>
  <div class="wrap">
    <div class="card-table">
      <TableComponent :columns="shareMsgColumns" :data="tableData" :tableOption="tableOption" :stripe="stripe">
        <template scope="scope">
          <el-button v-show="!scope.scope.row.show" @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
        </template>
      </TableComponent>
    </div>
    <div class="add-form">
      <el-button tableOption.isShowOperate type="text" @click="handleAdd">+新增</el-button>
    </div>
    <MemberAndCompany @sendData="getDialogData" :dialogData="dialogData" />
    <el-dialog :title="title" :visible.sync="dialogVisibleAdd" width="60%" :before-close="handleCancle">
      <div class="dialog-box">
        <el-form ref="form" :model="addForm" label-width="140px" :rules="rules" label-position="left" style="padding: 0 20px;">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="股东" prop="shareholder" style="margin-bottom: 12px;margin-left: -9px">
                <el-input v-model="addForm.shareholder" size="small" :class="ifEdit? 'editClass':'seeClass'" disabled></el-input>
                <el-button v-if="ifEdit" type="text" size="mini" @click="handleShowDialog">选择</el-button>
              </el-form-item>
              <el-form-item label="股份类别" prop="shareCategoryName" style="margin-bottom: 12px; margin-left: -9px">
                <el-select v-model="addForm.shareCategoryName" clearable  value-key="shareCategoryName" size="small" style="width: calc(100% - 9px); margin-left: 9px" class="select-item" @change="shareCategoryNameChange">
                  <el-option
                    v-for="item in shareTypeOption"
                    :key="item.shareCategoryName"
                    :label="item.shareCategoryName"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="股票代码" prop="shareCode" style="margin-bottom: 12px;">
                <el-input v-model="addForm.shareCode" size="small" disabled></el-input>
              </el-form-item>
              <el-form-item label="股票简称" prop="shareShortName" style="margin-bottom: 12px;">
                <el-input v-model="addForm.shareShortName" size="small" disabled></el-input>
              </el-form-item>
              <el-form-item label="业务日期" prop="buyTime" style="margin-bottom: 12px; margin-left: -9px">
                <el-date-picker :picker-options="pickerOptions" class="select-item" clearable style="width: calc(100% - 9px); margin-left: 9px" type="date" placeholder="选择日期" v-model="addForm.buyTime" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item label="认购股份数" prop="subscribeShare" style="margin-bottom: 12px; margin-left: -9px">
                <el-input v-model="addForm.subscribeShare" clearable size="small" style="width: calc(100% - 9px); margin-left: 9px"></el-input>
              </el-form-item>
              <el-form-item label="已缴款股份数" prop="paidShare" style="margin-bottom: 12px;">
                <el-input v-model="addForm.paidShare" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="分红权份额" prop="dividendShare" style="margin-bottom: 12px;">
                <el-input v-model="addForm.dividendShare" clearable size="small"></el-input>
              </el-form-item>
              <el-form-item label="质押或冻结的股份数" prop="pleFrz" style="margin-bottom: 12px;">
                <el-input v-model="addForm.pleFrz" clearable size="small"></el-input>
              </el-form-item>
              <el-form-item v-show="!ifEdit" label="退出日期" prop="exitDate" style="margin-bottom: 12px">
                <el-date-picker :picker-options="pickerOptions" class="select-item" type="date" placeholder="选择日期" v-model="addForm.exitDate" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="委托人" prop="consignerName" style="margin-bottom: 12px;">
                <el-input v-model="addForm.consignerName" size="small" disabled style="width: calc(100% - 30px)"></el-input>
                <el-button type="text" size="mini" @click="handleSelectConsigner">选择</el-button>
                <i class="el-icon-circle-close" @click="clearValue" />
              </el-form-item>
              <el-form-item label="股东类别" prop="shareholderType" style="margin-bottom: 12px; margin-left: -9px">
                 <el-select v-model="addForm.shareholderType" size="small" class="select-item" clearable style="width: calc(100% - 9px); margin-left: 9px">
                    <el-option
                      v-for="item in shareTypePeopleOption"
                      :key="item.code"
                      :label="item.value"
                      :value="item.code"
                    ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="上市交易所及板块" prop="listedExchange" style="margin-bottom: 12px">
                <el-select v-model="addForm.listedExchange" size="small" class="select-item" disabled>
                  <el-option
                    v-for="item in listedExchangeOptions"
                    :key="item.index"
                    :label="item.value"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="每股面值(原币)" prop="priceSharePerOc" style="margin-bottom: 12px;">
                <el-input v-model="addForm.priceSharePerOc" size="small" disabled></el-input>
              </el-form-item>
              <el-form-item label="证券账户" prop="stockAccount" style="margin-bottom: 12px;">
                <el-select v-model="addForm.stockAccount" size="small" class="select-item" clearable>
                  <el-option disabled label="证券账户名称" value="1">
                    <span style="float: left; color: #8492a6; font-size: 14px">证券账户号码</span>
                    <span style="float: right; color: #8492a6; font-size: 14px">证券账户名称</span>
                  </el-option>
                  <el-option
                    v-for="item in accountTypeOption"
                    :key="item.index"
                    :label="item.code"
                    :disabled="item.isValid==='1'?false:true"
                    :value="item.code">
                    <span style="float: left">{{ item.code }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="认购股本(原币)" prop="subscribeShareOc" style="margin-bottom: 12px;">
                <el-input v-model="addForm.subscribeShareOc" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="已缴款股本(原币)" prop="paidShareOc" style="margin-bottom: 12px;">
                <el-input v-model="addForm.paidShareOc" size="small" clearable></el-input>
              </el-form-item>
               <el-form-item label="表决权份额" prop="voteShare" style="margin-bottom: 12px;">
                <el-input v-model="addForm.voteShare" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="有限售条件的股份数" prop="limitShare" style="margin-bottom: 12px;">
                <el-input v-model="addForm.limitShare" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="已缴款股本(人民币)" prop="paidShareRmb" style="margin-bottom: 12px;">
                <el-input v-model="addForm.paidShareRmb" clearable size="small" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import MemberAndCompany from './components/memberAndCompany.vue'
import { shareMsgColumns } from '../js/index.js'
import { queryShareMsg, queryShareMsgHistory, shareType, editShareMsgFormal, queryShareMsgSingle, queryaccountList, queryALLBasicData, selectListedExchange } from '@/api/modules/propertyRight.js'
import { checkNumber } from '@/utils/pattern.js'
export default {
  components: {
    TableComponent,
    MemberAndCompany
  },
  data() {
    return {
      shareMsgColumns,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px'
      },
      stripe: true,
      rules: {
        shareCategoryName: [{ required: true, message: '请选择股份类别', trigger: 'change' }],
        shareholder: [{ required: true, message: '请选择股东', trigger: 'change' }],
        buyTime: [{ required: true, message: '请选择入股日期', trigger: 'change' }],
        shareholderType: [{ required: true, message: '请选择股东类别', trigger: 'change' }],
        subscribeShare: [
          { trigger: 'change',required: true,message: '请填入认购股份数' },
          { validator: checkNumber, trigger: 'change' }
        ],
        paidShareRmb: [{ validator: checkNumber, trigger: 'change' }],
        dividendShare: [{ validator: checkNumber, trigger: 'change' }],
        priceSharePerOc: [{ validator: checkNumber, trigger: 'change' }],
        paidShareOc: [{ validator: checkNumber, trigger: 'change' }],
        paidShare: [{ validator: checkNumber, trigger: 'change' }],
        voteShare: [{ validator: checkNumber, trigger: 'change' }]
      },
      // dialog=============
      dialogVisibleAdd: false,
      title: '',
      addForm: {
        shareholder: '',
        shareShortName: '',
        shareCategoryName: '',
        buyTime: '',
        exitDate: '',
        paidShareRmb: null,
        subscribeShare: null,
        dividendShare: null,
        shareholderType: '',
        priceSharePerOc: null,
        stockAccount: '',
        paidShareOc: null,
        paidShare: null,
        voteShare: null,
        shareholderId: '',
        consigner: '',
        consignerName: '',
        isPerson: '',
        appointType: '',
        pleFrz: null,
        limitShare: null,
        csid: null,
        subscribeShareOc: null
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6 // 如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      shareTypeOption: [], // 股份类别
      shareTypePeopleOption: [],
      accountTypeOption: [],
      listedExchangeOptions: [],
      ifEdit: false,
      // 选人/公司弹窗组件参数=============
      dialogData: {
        dialogVisible: false,
        shareTitle: ''
      },
      saveCmhkId: {
        cmhkId: ''
      },
    }
  },
  methods: {
    // 查询股东信息(此方法在父组件中调用)
    getShareMsg(params) {
      const key = this.$store.state.key.resourceCode
      if (key === '0') {
        this.tableOption.isShowOperate = false
      } else {
        this.tableOption.isShowOperate = true
      }
      this.saveCmhkId.cmhkId = params.cmhkId
      queryShareMsg(params).then(res => {
        if (res.data.code === '0') {
          const arr = res.data.body.list
          const obj = {
            shareholderBelong: '合计',
            subscribeShare: res.data.body.subscribeShareTotal, // 认购股份数
            subscribeShareOc: res.data.body.subscribeShareOcTotal, // 认购股本(原币)
            paidShare: res.data.body.paidShareTotal, // 已缴款股份数
            paidShareOc: res.data.body.paidShareOcTotal, // 已缴款股本(原币)
            paidShareRmb: res.data.body.paidShareRmbTotal, // 已缴款股本(人民币)
            voteShare: res.data.body.voteShareTotal, // 表决权份额
            dividendShare: res.data.body.dividendShareTotal, // 分红权份额
            subscribePer: res.data.body.subPerOcTotal, // 持股比例
            pleFrz: res.data.body.pleFrzTotal, // 质押或冻结的股份数
            limitShare: res.data.body.limitShareTotal, // 有限售条件的股份数
            show: true
          }
          arr.push(obj)
          this.tableData = arr
        }
      })
    },
    // 查询股东信息(此方法在父组件中调用)
    getShareMsgHistory(params) {
      const key = this.$store.state.key.resourceCode
      if (key === '0') {
        this.tableOption.isShowOperate = false
      } else {
        this.tableOption.isShowOperate = true
      }
      this.saveCmhkId.cmhkId = params.cmhkId
      queryShareMsgHistory(params).then(res => {
        if (res.data.code === '200') {
          const arr = res.data.data
          const obj = {
            shareholderBelong: '合计',
            subscribeShare: res.data.data.subscribeShareTotal, // 认购股份数
            subscribeShareOc: res.data.data.subscribeShareOcTotal, // 认购股本(原币)
            paidShare: res.data.data.paidShareTotal, // 已缴款股份数
            paidShareOc: res.data.data.paidShareOcTotal, // 已缴款股本(原币)
            paidShareRmb: res.data.data.paidShareRmbTotal, // 已缴款股本(人民币)
            voteShare: res.data.data.voteShareTotal, // 表决权份额
            dividendShare: res.data.data.dividendShareTotal, // 分红权份额
            subscribePer: res.data.data.subPerOcTotal, // 持股比例
            pleFrz: res.data.data.pleFrzTotal, // 质押或冻结的股份数
            limitShare: res.data.data.limitShareTotal, // 有限售条件的股份数
            show: true
          }
          if (arr.length == 0) {
            this.tableData = arr
          } else {
            arr.push(obj)
            this.tableData = arr
          }
        }
      })
    },
    editRow(row) {
      this.dialogVisibleAdd = true
      this.title = '修改'
      this.ifEdit = false
      const data = {
        csid: row.csid
      }
      queryShareMsgSingle(data).then(res => {
        if (res.data.code === '0') {
          this.addForm = res.data.body || {}
          if (res.data.body.shareholderCmhkId) {
            queryaccountList({cmhkId: res.data.body.shareholderCmhkId}).then(res => {
              this.accountTypeOption = res.data.body
            })
          } else {
            this.accountTypeOption = []
            return false
          }
        }
      })
      shareType(this.saveCmhkId).then(res => {
        this.shareTypeOption = res.data.body
      })
      queryALLBasicData({tableName: 'company_shareholder', field: 'shareholder_Type'}).then(res => {
        this.shareTypePeopleOption = res.data.body
      })
      selectListedExchange().then(res => {
        if (res.data.code === '0') {
          this.listedExchangeOptions = res.data.body
        }
      })
    },
    handleAdd() {
      this.dialogVisibleAdd = true
      this.title = '新增'
      this.ifEdit = true
      shareType(this.saveCmhkId).then(res => {
        this.shareTypeOption = res.data.body
      })
      queryALLBasicData({tableName: 'company_shareholder', field: 'shareholder_Type'}).then(res => {
        this.shareTypePeopleOption = res.data.body
      })
      selectListedExchange().then(res => {
        if (res.data.code === '0') {
          this.listedExchangeOptions = res.data.body
        }
      })
    },
    handleCancle() {
      this.resetForm('form')
      this.addForm.consigner = ''
      this.dialogVisibleAdd = false
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.addForm.csid = null
            const obj = Object.assign(this.addForm, this.saveCmhkId)
            editShareMsgFormal(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('保存成功')
                this.resetForm('form')
                this.addForm.consigner = ''
                this.dialogVisibleAdd = false
                this.getShareMsg(this.saveCmhkId)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.title === '修改') {
            editShareMsgFormal(this.addForm).then(res => {
              if (res.data.code === '0') {
                this.$message.success('修改成功')
                this.resetForm('form')
                this.addForm.consigner = ''
                this.dialogVisibleAdd = false
                this.getShareMsg(this.saveCmhkId)
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
        } else {
          this.$message.error('请检查必填字段')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    clearValue() {
      this.addForm.consigner = ''
      this.addForm.consignerName = ''
    },
    // 点击选择显示选择股东弹窗
    handleShowDialog() {
      this.dialogData.dialogVisible = true
      this.dialogData.shareTitle = '股东'
    },
    handleSelectConsigner() {
      this.dialogData.dialogVisible = true
      this.dialogData.shareTitle = '委托人'
    },
    getDialogData(data) {
      if (this.dialogData.shareTitle === '股东') {
        if (data.code === ''||data.value === '') {
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        } else {
          this.addForm.shareholder = data.value
          this.addForm.shareholderId = data.code
          this.addForm.isPerson = data.isPerson
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
          const params = { cmhkId: data.cmhkId }
          queryaccountList(params).then(res => {
            this.accountTypeOption = res.data.body
          })
        }
      } else if (this.dialogData.shareTitle === '委托人') {
        if (data.code === ''||data.value === '') {
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        } else {
          this.addForm.consignerName = data.value
          this.addForm.consigner = data.code
          this.addForm.appointType = data.appointType
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        }
      }
    },
    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    shareCategoryNameChange(data) {
      this.addForm.shareCategoryName = data.shareCategoryName
      this.addForm.shareShortName = data.shareShortName
      this.addForm.priceSharePerOc = data.priceSharePerOc
      this.addForm.listedExchange = data.listedExchange
      this.addForm.shareCode = data.shareCode
    }

  }
}
</script>

<style lang="less" scoped>
  .wrap {
    .card-table {
      width: 100%;
    }
    .add-form {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .table-box {
      height: 50vh;
    }
    .select-item {
      width: 100%;
    }
    .dialog-box {
      height: 45vh;
      overflow: auto;
    }
    .editClass {
      width: calc(100% - 39px);
      margin-left: 9px;
    }
    .seeClass {
      width: calc(100% - 9px);
      margin-left: 9px;
    }
    .editClassNoStar {
      width: calc(100% - 30px);
    }
    .el-icon-circle-close {
      position: absolute;
      top: 15px;
      right: 38px;
      font-size: 14px;
      color: gray;
    }
  }
</style>
